{% extends "base.njk" %}

{% block content %}
  <!-- 英雄区域 -->
  {% include "sections/hero.njk" %}

  <!-- 项目背景 -->
  {% include "sections/background.njk" %}
  {# 新增的项目背景区块 #}

  <!-- 合作伙伴/支持者  
  {% include "sections/partners.njk" %}-->

  <!-- 特性区域 -->
  {% include "sections/features.njk" %}

  <!-- 使用场景 -->
  {% include "sections/use-cases.njk" %}

  <!-- 性能对比 
  {% include "sections/performance.njk" %}-->

  <!-- 文档和教程 -->
  {% include "sections/docs.njk" %}

  <!-- 下载区域 -->
  {% include "sections/download.njk" %}

  <!-- 社区和支持 -->
  {% include "sections/community.njk" %}

  <!-- 贡献者 -->
  {% include "sections/contributors.njk" %}

  <!-- 订阅区域 
  {% include "sections/subscribe.njk" %}
{% endblock %}-->

{% block extraScripts %}
  // 初始化计数器
  let countersAnimated = false;
         const counters = [{
               id: 'counter1',
               target: '暂无数据'
            },
            {
               id: 'counter2',
               target: '暂无数据'
            },
            {
               id: 'counter3',
               target: '暂无数据'
            },
            {
               id: 'counter4',
               target: '暂无数据'
            }
         ];
  
  // 监听滚动，当计数器区域进入视口时开始动画
  window.addEventListener('scroll', () => {
    if (!countersAnimated && isInViewport(document.getElementById('counter1'))) {
      counters.forEach(counter => {
        animateCounter(document.getElementById(counter.id), counter.target);
      });
      countersAnimated = true;
    }
  });
  
  // 如果页面加载时计数器已经在视口中，直接开始动画
  if (isInViewport(document.getElementById('counter1'))) {
    counters.forEach(counter => {
      animateCounter(document.getElementById(counter.id), counter.target);
    });
    countersAnimated = true;
  }
  
  // 初始化性能图表
  function initPerformanceChart() {
    const ctx = document.getElementById('performanceChart').getContext('2d');
    
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['启动速度', '内存占用', '处理效率', '扩展性', '易用性'],
        datasets: [
          {
            label: 'Snow',
            data: [90, 85, 92, 88, 95],
            backgroundColor: '#165DFF',
            borderRadius: 6
          },
          {
            label: '竞品 A',
            data: [75, 65, 80, 70, 85],
            backgroundColor: '#36CFC9',
            borderRadius: 6
          },
          {
            label: '竞品 B',
            data: [65, 70, 75, 60, 80],
            backgroundColor: '#FAAD14',
            borderRadius: 6
          }
        ]
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: 'top',
          },
          title: {
            display: true,
            text: '性能对比 (分数越高越好)'
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            max: 100
          }
        }
      }
    });
  }
  
  // FAQ 折叠面板
  const faqToggles = document.querySelectorAll('.faq-toggle');
  
  faqToggles.forEach(toggle => {
    toggle.addEventListener('click', () => {
      const content = toggle.nextElementSibling;
      const icon = toggle.querySelector('i');
      
      content.classList.toggle('hidden');
      icon.classList.toggle('rotate-180');
      
      // 关闭其他打开的FAQ
      faqToggles.forEach(otherToggle => {
        if (otherToggle !== toggle) {
          const otherContent = otherToggle.nextElementSibling;
          const otherIcon = otherToggle.querySelector('i');
          
          otherContent.classList.add('hidden');
          otherIcon.classList.remove('rotate-180');
        }
      });
    });
  });
  
  // 页面加载完成后初始化图表
  window.addEventListener('load', initPerformanceChart);
{% endblock %}